<!-- 登录页 -->
<template>
  <div class="login-container pages flex-col">
    <div class="group_1 flex-row">
      <img class="image_1" referrerpolicy="no-referrer" src="../../assets/icon/login/logo.png"/>
      <div class="box_1 flex-col">
        <span class="text_1">{{$t('common.login.title')}}</span>
        <div class="group_2 flex-row">
          <span class="text_2">{{$t('common.login.welcome')}}</span>
          <span class="text_3"><sapn @click="switchLanguage('zh_CN')">中</sapn> | <sapn @click="switchLanguage('en_US')">En</sapn></span>
          <!-- <img
            class="image_2"
            referrerpolicy="no-referrer"
            src="src="../../assets/icon/login/qrcode.png""
          /> -->
        </div>
        <div class="image-text_1 flex-row justify-between">
          <img class="label_1" referrerpolicy="no-referrer" src="../../assets/icon/login/user.png"/>
          <span class="text-group_1">{{$t('common.login.accountName')}}</span>
        </div>
        <el-input class="text-wrapper_1 flex-col" ref="username" v-model="loginForm.phone" :placeholder="$t('common.login.accountName_placeholder')" name="username" type="text" tabindex="1" autocomplete="on"></el-input>
        <div class="image-text_2 flex-row justify-between">
          <img class="label_2" referrerpolicy="no-referrer" src="../../assets/icon/login/lock.png"/>
          <span class="text-group_2">{{$t('common.login.password')}}</span>
        </div>
        <el-input class="text-wrapper_2 flex-col" :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
          :placeholder="$t('common.login.password_placeholder')" name="password" tabindex="2" autocomplete="on" @keyup.native="checkCapslock"
          @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
        <el-button class="text-wrapper_3 flex-col" @click.native.prevent="handleLogin"><span class="text_6">{{$t('common.login.login')}}</span></el-button>
        <div class="text-group_3 flex-col justify-between">
          <span class="text_7">{{$t('common.login.copyright')}}</span>
          <span class="text_8">Copyright&nbsp;SYLINK&nbsp;2024</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {checkAuthTime} from '@/utils/index.js'
  export default {
    name: "Login",
    data() {
      return {
        checked: false,
        versions: "",
        verification: '',
        loginForm: {
          phone: "",    // 13812340001
          password: "", // 123456
          clientType: "Robot_Server"
        },
        loginRules: {
          phone: [{
            required: true,
            trigger: "blur",
            message: 'Please enter your account or phone number',
          }],
          password: [{
              required: true,
              trigger: "blur",
              message: 'Please enter password',
            },
            // {
            //   min: 6,
            //   message: '密码最少6位数',
            //   trigger: 'blur'
            // }
          ],
        },
        passwordType: "password",
        capsTooltip: false,
        loading: false,
        showDialog: false,
        redirect: undefined,
        otherQuery: {},
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          const query = route.query;
          if (query) {
            this.redirect = query.redirect;
            this.otherQuery = this.getOtherQuery(query);
          }
        },
        immediate: true,
      },
    },
    created() {
      if (checkAuthTime(process.env.VUE_APP_PRODUCT_AUTH) === false) {
        this.$router.push(`/notfound`);
      }
      this.versions = process.env.VUE_APP_VERSION;
    },
    mounted() {
      if (Cookies.get('userspassword')) {
        this.loginForm.phone = Cookies.get('usersname')
        this.loginForm.password = Cookies.get('userspassword')
        this.checked = true
      } else {
        // this.loginForm.phone = Cookies.get('usersname')
        // this.loginForm.password = Cookies.get('userspassword')
        this.checked = false
      }
      if (this.loginForm.phone === "") {
        this.$refs.username.focus();
      } else if (this.loginForm.password === "") {
        this.$refs.password.focus();
      }
    },
    destroyed() {
      // window.removeEventListener('storage', this.afterQRScan)
    },
    methods: {
      switchLanguage(val) {
        localStorage.setItem('language', val);
        location.reload();
      },
      checkCapslock(e) {
        const {
          key
        } = e;
        this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
      },
      showPwd() {
        if (this.passwordType === "password") {
          this.passwordType = "";
        } else {
          this.passwordType = "password";
        }
        this.$nextTick(() => {
          this.$refs.password.focus();
        });
      },
      handleLogin() {
        localStorage.removeItem('APP_auth');
        if (this.loginForm.phone === '') {
          this.$message({
            showClose: true,
            message: 'Please enter your account or phone number',
            type: 'error'
          });
        } else if (this.loginForm.password === '') {
          this.$message({
            showClose: true,
            message: 'Please enter password',
            type: 'error'
          });
        } else {
          this.loading = true;
          this.$store
          .dispatch("user/login", this.loginForm)
          .then(() => {
            this.$router.push({
              path: this.redirect || "/",
              query: this.otherQuery,
            });
            this.loading = false;
            if (this.checked === true) {
              Cookies.set('usersname', this.loginForm.phone);
              Cookies.set('userspassword', this.loginForm.password);
            } else {
              // Cookies.remove('usersname')
              Cookies.remove('userspassword')
            }
          })
          .catch(() => {
            this.loading = false;
          });
        }
      },
      getOtherQuery(query) {
        return Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur];
          }
          return acc;
        }, {});
      },
    },
  };
</script>
<style src="../../styles/css/common.css" />
<style lang="css">
.pages {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
  height: 100vh;
  margin: 0;
  .group_1 {
    /* border-radius: 24px; */
    height: 100vh;
    background-image: url(../../assets/icon/login/bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* margin: 20px; */
    .image_1 {
      width: 384px;
      height: 104px;
      margin: 30px 0 0 40px;
    }
    .box_1 {
      box-shadow: inset 0px 0px 18px 4px rgba(1, 107, 110, 0.16);
      border-radius: 30px;
      background-image: url(../../assets/icon/login/panal.png);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      width: 600px;
      height: 750px;
      border: 4px solid rgba(255, 255, 255, 1);
      margin: 5% 34% 0 auto;
      text-align: center;
      .text_1 {
        width: 432px;
        height: 44px;
        overflow-wrap: break-word;
        color: rgba(1, 107, 110, 1);
        font-size: 48px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        line-height: 44px;
        margin: 64px 0 0 48px;
      }
      .group_2 {
        width: 560px;
        height: 56px;
        margin: 32px 0 0 48px;
        .text_2 {
          width: 224px;
          height: 44px;
          overflow-wrap: break-word;
          color: rgba(20, 26, 31, 1);
          font-size: 32px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 44px;
          margin-top: 6px;
        }
        .text_3 {
          width: 80px;
          height: 28px;
          overflow-wrap: break-word;
          color: rgba(34, 34, 34, 0.85);
          font-size: 20px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 28px;
          margin: 14px 0 0 182px;
        }
        .image_2 {
          width: 56px;
          height: 56px;
          margin-left: 18px;
        }
      }
      .image-text_1 {
        width: 112px;
        height: 32px;
        margin: 44px 0 0 64px;
        .label_1 {
          width: 24px;
          height: 24px;
          margin-top: 4px;
        }
        .text-group_1 {
          width: 80px;
          height: 32px;
          overflow-wrap: break-word;
          color: rgba(1, 107, 110, 1);
          font-size: 20px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 32px;
        }
      }
      .text-wrapper_1 {
        background-color: rgba(247, 247, 247, 1);
        border-radius: 16px;
        height: 80px;
        border: 1px solid rgba(255, 255, 255, 1);
        width: 500px;
        margin: 12px 0 0 48px;
        .text_4 {
          width: 180px;
          height: 28px;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 20px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 28px;
          margin: 26px 0 0 32px;
        }
      }
      .image-text_2 {
        width: 72px;
        height: 32px;
        margin: 32px 0 0 64px;
        .label_2 {
          width: 24px;
          height: 24px;
          margin-top: 4px;
        }
        .text-group_2 {
          width: 40px;
          height: 32px;
          overflow-wrap: break-word;
          color: rgba(1, 107, 110, 1);
          font-size: 20px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 32px;
        }
      }
      .text-wrapper_2 {
        background-color: rgba(247, 247, 247, 1);
        border-radius: 16px;
        height: 80px;
        border: 1px solid rgba(255, 255, 255, 1);
        width: 500px;
        margin: 12px 0 0 48px;
        .text_5 {
          width: 180px;
          height: 28px;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 20px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 28px;
          margin: 26px 0 0 32px;
        }
      }
      .text-wrapper_3 {
        box-shadow: inset 0px -2px 0px 0px rgba(61, 171, 175, 1);
        background-color: rgba(1, 107, 110, 1);
        border-radius: 16px;
        height: 70px;
        width: 500px;
        margin: 48px 0 0 48px;
        .text_6 {
          width: 96px;
          height: 40px;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 24px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 40px;
          margin: 0 0 0 180px;
        }
      }
      .text-group_3 {
        width: 400px;
        height: 50px;
        margin: 30px auto 0 auto;
        .text_7 {
          width: 252px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          text-align: center;
          font-size: 14px;
          white-space: nowrap;
          line-height: 20px;
          margin: 0 auto 0 auto;
        }
        .text_8 {
          width: 407px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          text-align: center;
          white-space: nowrap;
          line-height: 20px;
          margin: 10 auto 0 auto;
        }
      }
    }
  }
}
</style>

<style lang="scss">
  $bg: #283443;
  $light_gray: #fff;
  $cursor: #fff;
  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;
    }
  }
  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 45px;
      width: 80%;
      input {
        color: #646464;
        height: 80px;
        border: 0px;
        font-size: 22px;
        border-radius: 0px;
        padding: 12px 30px 12px 30px;
        background: transparent;
      }
    }
    .el-button { width: 100%; height: 50px; color: #fff; font-size: 22px; font-weight: bold; }
    .el-form-item { background: #F4F5F0; border-radius: 10px; }
    .el-form-item__content { border: #369BA5; }
  }
</style>
